<template>
  <div class="header" style="display: flex">
    <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item
          :to="{ path: '/' }"
          v-for="item in breadcrumbList"
          :key="item.path">
        {{ item.meta.title }}
      </el-breadcrumb-item>
    </el-breadcrumb>

    <el-dropdown trigger="click">
      <span style="margin-right: 15px">{{ username }}</span>
      <i class="el-icon-setting" style="margin-right: 20px"></i>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
<!--    <div>
      <span>小米商城后台管理系统</span>
    </div>-->
  </div>
</template>

<script>
import {restRouter} from "@/router";

export default {
  name: 'admin-header',

  data() {
    return {
      username: ''
    }
  },

  computed: {
    breadcrumbList() {
      return this.$route.matched
    }
  },

  created() {
    this.username = this.$cookie.get('username')
  },

  mounted() {
  },

  methods: {
    logout() {
      this.request.post('/logout').then(() => {
        this.$message.success('退出成功')
        // localStorage.removeItem('userInfo')
        this.$cookie.delete('username')
        localStorage.removeItem('menus')
        //重置路由
        restRouter()

        this.$router.replace('/login')
      }).catch(() => {
        this.$message.error('退出失败')
      })

    }
  }
}
</script>

<style lang="scss" scoped>
.breadcrumb {
  display: inline-block;
  margin-left: 20px;
  flex: 1;
}

.header {
  height: 60px;
  padding: 0 20px;

  span {
    line-height: 60px;
    //margin-right: 15px;
  }
}

</style>
